import QtQuick
import QtQuick.Controls.Basic

Button {
    id: control
    visible: true
    implicitHeight:30
    implicitWidth: 100
    text: qsTr("Button")


    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        id: rectangle
        implicitWidth: parent.width
        implicitHeight: 30
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 20
        BusyIndicator {
            id: controlBusy
            visible: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter

            contentItem: Item {
                id: _item
                implicitWidth: 32
                implicitHeight: 32

                Item {
                    id: itemBusy
                    width: 32
                    height: 32
                    opacity: controlBusy.running ? 1 : 0

                    Behavior on opacity {
                        OpacityAnimator {
                            duration: 250
                        }
                    }
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.horizontalCenterOffset: 35
                    anchors.horizontalCenter: parent.horizontalCenter

                    RotationAnimator {
                        target: itemBusy
                        running: controlBusy.visible && controlBusy.running
                        from: 0
                        to: 360
                        loops: Animation.Infinite
                        duration: 1250
                    }

                    Repeater {
                        id: repeater
                        model: 6

                        Rectangle {
                            id: delegate
                            x: itemBusy.width / 2 - width / 2
                            y: itemBusy.height / 2 - height / 2
                            implicitWidth: 10
                            implicitHeight: 10
                            radius: 5
                            color: "#21be2b"

                            required property int index

                            transform: [
                                Translate {
                                    y: -Math.min(itemBusy.width, itemBusy.height) * 0.5 + 5
                                },
                                Rotation {
                                    angle: delegate.index / repeater.count * 360
                                    origin.x: 5
                                    origin.y: 5
                                }
                            ]
                        }
                    }
                }
            }
        }
    }

}
